window.onload = async function () {
  try {
    const res = await axios({
      url: '/dashboard',
    })
    console.log('res:', res)
    const { overview, year, salaryData, groupData, provinceData } = res.data
    console.log(overview)
    // 顶部渲染
    for (const k in overview) {
      document.querySelector(`[name=${k}]`).innerText = overview[k]
    }

    // 薪资走势
    !(function () {
      const myChart = echarts.init(document.getElementById('line'))
      const option = {
        title: {
          text: '2021全学科薪资走势',
          top: '2%',
          left: '2%',
        },
        xAxis: {
          type: 'category',
          data: year.map((item) => item.month),
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: '#d3d3d3',
            },
          },
          axisLabel: {
            color: '#000',
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#70bbf4',
              type: 'dashed',
            },
          },
        },
        tooltip: {
          show: true,
        },
        series: [
          {
            data: year.map((item) => item.salary),
            emphasis: {
              disabled: true,
            },
            type: 'line',
            smooth: true,
            symbolSize: 10,
            lineStyle: {
              width: 8,
              color: '#3c7aeb',
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#cee3fc',
                  },
                  {
                    offset: 1,
                    color: '#fff',
                  },
                ],
                global: false,
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    })()
    // 薪资分布
    !(function () {
      const myChart = echarts.init(document.getElementById('salary'))
      const option = {
        title: {
          text: '班级薪资分布',
          top: '2%',
          left: '3%',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          bottom: '5%',
          left: 'center',
        },
        color: ['#4291ff', '#25da95', '#2fd4ff', '#ff9f15'],
        series: [
          {
            name: '薪资分布',
            type: 'pie',
            radius: ['55%', '75%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: salaryData.map((item) => {
              return {
                name: item.label,
                value: item.g_count + item.b_count,
              }
            }),
          },
        ],
      }
      myChart.setOption(option)
    })()
    // 班级每组薪资
    !(function () {
      const myChart = echarts.init(document.getElementById('lines'))
      const option = {
        xAxis: {
          type: 'category',
          data: groupData[1].map((item) => item.name),
          axisLine: {
            lineStyle: {
              type: 'dashed',
              color: '#d4d4d6',
            },
          },
        },
        tooltip: {
          show: true,
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              type: 'dashed',
            },
          },
        },
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#62daa1',
              },
              {
                offset: 1,
                color: '#d5f2e7',
              },
            ],
            global: false,
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#578ff7',
              },
              {
                offset: 1,
                color: '#d8e8f8',
              },
            ],
            global: false,
          },
        ],
        series: [
          {
            data: groupData[1].map((item) => item.hope_salary),
            type: 'bar',
          },
          {
            data: groupData[1].map((item) => item.salary),
            type: 'bar',
          },
        ],
      }
      myChart.setOption(option)

      // 点击功能
      const btns = document.querySelectorAll('#btns .btn-xs')
      btns.forEach((item) => {
        item.addEventListener('click', function () {
          // console.log(this)
          document.querySelector('.btn-blue').classList.remove('btn-blue')
          this.classList.add('btn-blue')
          const index = this.innerText.trim()
          option.xAxis.data = groupData[index].map((item) => item.name)
          option.series[0] = groupData[index].map((item) => item.hope_salary)
          option.series[1] = groupData[index].map((item) => item.salary)
          myChart.setOption(option)
        })
      })
    })()
    // 男女薪资分布
    !(function () {
      const myChart = echarts.init(document.getElementById('gender'))
      const option = {
        title: [
          {
            text: '男女薪资分布',
            left: '3%',
            top: '2%',
          },
          {
            text: '男生',
            left: '50%',
            top: '40%',
            textAlign: 'center',
          },
          {
            text: '女生',
            left: '50%',
            top: '85%',
            textAlign: 'center',
          },
        ],
        tooltip: {
          trigger: 'item',
        },
        color: ['#4291ff', '#25da95', '#2fd4ff', '#ff9f15'],
        series: [
          {
            name: '男生',
            type: 'pie',
            radius: ['30%', '40%'],
            center: ['50%', '25%'],
            data: salaryData.map((item) => ({
              value: item.b_count,
              name: item.label,
            })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
          {
            name: '女生',
            type: 'pie',
            radius: ['30%', '40%'],
            center: ['50%', '70%'],
            data: salaryData.map((item) => ({
              value: item.g_count,
              name: item.label,
            })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    })()
  } catch (err) {}
}
